<template>
	<view class="main">
		<!-- 导航 -->
		<view class="nav">
			<view class="day list" @click="ClickList" data-index = 0>日复盘 
				<view :class="{isNavBorderShow:isNavClickActive1}"></view>
			</view>
			<view class="month list" @click="ClickList" data-index = 1>
				与昨日对比
				<view :class="{isNavBorderShow:isNavClickActive2}">
				</view>
			</view>
		</view>
		 <view v-show="isNavClickActive1">
			<day-review></day-review>
		</view>
		<view v-show="isNavClickActive2">
			<balance></balance>
		</view>
		<NewBtn />
	</view>
</template>
<script>
	import dayReview from './dayReview/dayReview.vue'
	import balance from './balance/balance.vue'
	import NewBtn from '../../components/newBtn.vue'
	
	export default { 
		components: {
			dayReview,
			balance,
			NewBtn
		},
		data() {
		    return {
				flat:true,
				// isNavClickActive:[true,false],
				isNavClickActive1:true,
				isNavClickActive2:false,
		    }      
		
		},
		onLoad() {
			console.log('onLoad')
		},
		onShow() {
			console.log('onShow')
		},
		computed:{
			// Active(){
			// 	return this.isActive ? 'active' : ''
			// }
		},
		methods:{
			ClickList(e){
				/*
				for(let i = 0; i < this.isNavClickActive.length; i++){
					if(i == e.target.dataset.index){
						this.isNavClickActive[i] = true
					}
					else{
						this.isNavClickActive[i] = false
					}
				}
				*/
				if(e.target.dataset.index == 0){
					this.isNavClickActive1 = true
					this.isNavClickActive2 = false
				}
				else if(e.target.dataset.index == 1){
					this.isNavClickActive1 = false
					this.isNavClickActive2 = true
				}
			}
		}
	}  
</script>

<style>
	.isNavBorderShow{
		position: relative;
		bottom: 10rpx;
		border-radius:20rpx;
		height: 10rpx;
		width: 100%;
		background-color: #007AFF;
	}
	.main{
		box-sizing: border-box;
	}
	.active{
		background-color: red !important;
	}
	.nav{
		margin-top: 0rpx !important;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 15rpx 30rpx #e8e8e8;
		padding-left: 4%;
	}
	.nav .list{
		display: inline-block;
		font-size: 16px;
		color: #6C6C6C;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		width: 45%;
		/* background-color: #4CD964; */
		margin-right: 2%;
	}
</style>
